<template>
    <kdx-modal-frame v-model="value" title="确认客户已经归还" :width="1100" @on-cancel="handleCancel" @on-ok="handleOk" class="order-detail">
        <Alert show-icon closable type="warning" style="margin: 12px;">
            操作提示
            <template #desc>确认收货后将给客户结算本订单的金额（结算后不能调整），请仔细核对租赁日期、商品租金明细、金额调整明细等...</template>
        </Alert>

        <div style="margin: 12px;">
            <Icon type="md-alarm" style="font-size: 16px;" /> 下单时租设定的赁日期：<Tag type="border" color="success">{{ item.lease_start_date }}</Tag> ~ <Tag type="border" color="success">{{ item.lease_end_date }}</Tag>，共<Tag color="success" style="margin: 2px 4px 2px 4px;">{{ item.lease_day_num }}</Tag>天
            <span v-if="item.lease_overdue_day > 0">，超期<Tag color="warning" style="margin: 2px 4px 2px 4px;">{{ item.lease_overdue_day }}</Tag>天归还</span>
            <span v-if="item.lease_overdue_day < 0">，提前<Tag color="warning" style="margin: 2px 4px 2px 4px;">{{ Math.abs(item.lease_overdue_day) }}</Tag>天归还</span>
        </div>

        <div class="item-box">
            <div class="item-box-title">
                <Row>
                    <i-col span="8">商品信息</i-col>
                    <i-col span="16" style="text-align: right;">
                        <Tag type="border" color="warning">实付押金：￥{{ this.formatPrice(item.lease_deposit_actual) }}</Tag>
                        <Tag type="border" color="warning">总租金：￥{{ this.formatPrice(item.lease_money_total) }}</Tag>
                    </i-col>
                </Row>
            </div>
            <table class="ivu-table" cellspacing="0" style="width: 100%;">
                <tr>
                    <td style="max-width: 220px; padding-left: 14px;">商品</td>
                    <td style="max-width: 100px;">数量</td>
                    <td style="max-width: 200px;">定价</td>
                    <td>实际金额明细</td>
                </tr>
                <tr v-for="(i, index) in goods" :key="index">
                    <td>
                        <div class="shop-box">
                            <div class="image">
                                <img :src="$utils.media(i.thumb)" height="30" />
                            </div>
                            <div class="content">
                                <div class="content-text">
                                    <span class="text">
                                        {{ i.title }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        {{ i.total }}件
                    </td>
                    <td>
                        <Tag color="default">押金</Tag>￥{{ formatPrice(i.lease_deposit) }}/件<br/>
                        <Tag color="default">起租</Tag>￥{{ formatPrice(i.lease_min_rent) }} ({{ i.lease_min_days }}天起)<br/>
                        <Tag color="default">续租</Tag>￥{{ formatPrice(i.lease_rent) }}/件/天
                    </td>
                    <td>
                        <Tag color="default">总押金</Tag>￥{{ formatPrice(i.lease_deposit_money) }} = ￥{{ formatPrice(i.lease_deposit) }} x {{ i.total }}件<br/>
                        <Tag color="default">总租金</Tag>￥{{ formatPrice(i.lease_money) }} = (起租￥{{ formatPrice(i.lease_min_rent) }} + 续租￥{{ formatPrice(i.lease_rent) }} x {{ i.lease_extend_day }}天) x {{ i.total }}件
                        <span v-if="i.lease_overdue_money != 0"><br/><Tag :color="i.lease_overdue_money > 0 ? 'success' : 'warning'">{{ i.lease_overdue_money > 0 ? '超期' : '提前归还' }}</Tag>￥{{ formatPrice(i.lease_overdue_money) }} = 续租￥{{ formatPrice(i.lease_rent) }} x {{ i.lease_overdue_day }}天 x {{ i.total }}件</span>
                    </td>
                </tr>
            </table>
        </div>
        
        <div class="item-box" v-if="item.lease_manual_remark.length > 0">
            <div class="item-box-title">
                <Row>
                    <i-col span="12">金额调整</i-col>
                    <i-col span="12" style="text-align: right;">
                        <Tag type="border" color="warning">总计金额：￥{{ this.formatPrice(item.lease_manual_remark_total) }}</Tag>
                    </i-col>
                </Row>
            </div>
            <div v-for="(re, index) in item.lease_manual_remark" :key="index" style="padding: 10px 10px 2px 10px; border-bottom: 1px solid var(--border-color);">
                <Row>
                    <i-col span="3">
                        <kdx-tag-label
                            :type="pays[re.type]['class']"
                            border
                            style="margin: 0 10px 10px 0;"
                        >{{ pays[re.type]['name'] }}</kdx-tag-label>
                    </i-col>
                    <i-col span="1"></i-col>
                    <i-col span="3">
                        ￥{{ re.amount }}
                    </i-col>
                    <i-col span="1"></i-col>
                    <i-col span="16">
                        {{ re.info }}
                    </i-col>
                </Row>
            </div>
        </div>

        <div style="margin: 12px;">
            <Row>
                <Col span="6">
                    <Card>
                        <div style="text-align:center">
                            <img :src="buyer.avatar" height="93" />
                            <h3>{{ buyer.name }}</h3>
                            <p>{{ buyer.mobile }}</p>
                        </div>
                    </Card>
                </Col>
                <Col span="1">&nbsp;</Col>
                <Col span="17">
                    <Card>
                        <Row>
                            <Col span="6"><Icon type="logo-yen" style="font-size: 144px;" /></Col>
                            <Col span="18">
                                <p>
                                    <Tag type="dot" color="primary" style="width: 260px;">
                                        总实付款 ￥{{ this.formatPrice(item.pay_price) }}
                                    </Tag>
                                    <Tag type="dot" color="success" style="width: 260px;">
                                        扣除总租金 ￥{{ this.formatPrice(item.lease_money_total) }}
                                    </Tag>
                                </p>
                                <p v-if="item.lease_overdue_total != 0 && item.lease_manual_remark_total != 0">
                                    <!-- 超期/提前还 -->
                                    <Tag v-if="item.lease_overdue_total > 0" type="dot" color="error" style="width: 260px;">
                                        超期扣除 ￥{{ this.formatPrice(item.lease_overdue_total) }}
                                    </Tag>
                                    <Tag v-if="item.lease_overdue_total < 0" type="dot" color="error" style="width: 260px;">
                                        提前归还需返还给客户 ￥{{ this.formatPrice(Math.abs(item.lease_overdue_total)) }}
                                    </Tag>
                                    <!-- 调整金额 -->
                                    <Tag v-if="item.lease_manual_remark_total > 0" type="dot" color="warning" style="width: 260px;">
                                        调整后需返还给客户 ￥{{ this.formatPrice(item.lease_manual_remark_total) }}
                                    </Tag>
                                    <Tag v-if="item.lease_manual_remark_total < 0" type="dot" color="warning" style="width: 260px;">
                                        调整后需扣除金额 ￥{{ this.formatPrice(Math.abs(item.lease_manual_remark_total)) }}
                                    </Tag>
                                </p>
                                <p style="margin-top: 16px; font-size: 28px; color: #f58a87;">
                                    <span v-if="item.lease_postpaid_total > 0">
                                        <Icon type="md-alert" style="font-size: 34px;" /> 给客户退款 ￥{{ this.formatPrice(item.lease_postpaid_total) }}
                                    </span>
                                    <span v-if="item.lease_postpaid_total < 0">
                                        <Icon type="md-alert" style="font-size: 34px;" /> 客户还需补款 ￥{{ this.formatPrice(Math.abs(item.lease_postpaid_total)) }}
                                    </span>
                                </p>
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>
        </div>
        
    </kdx-modal-frame>
</template>

<script lang="ts">
export default {
    name: "ConfirmReturned",
    props: {
        item: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            value: false,
            goods: [
                {
                    thumb: '', title: '', lease_deposit: '', lease_min_rent: '',
                    lease_min_days: '', lease_rent: '', lease_deposit_money: '',
                    total: '', lease_money: '', lease_extend_day: '',
                    lease_overdue_money: 0, lease_overdue_day: 0
                }
            ],
            pays: {
                'add': {
                    class: 'danger',
                    name: '-返还给客户',
                },
                'reduce': {
                    class: 'success',
                    name: '+扣除',
                },
            },
            buyer: {
                name: '',
                mobile: '',
                avatar: ''
            }
        };
    },
    methods: {
        setValue() {
            this.value = !this.value;
            if (this.value) {
                // 商品处理
                this.goods = this.item.order_goods
                // 购买人
                this.buyer.name = this.item.buyer_name
                this.buyer.mobile = this.item.buyer_mobile
                this.buyer.avatar = this.item.member_avatar
                
            }
        },
        handleCancel() {
            this.setValue();
        },
        handleOk() {
            // 调用接口
            this.$Modal.confirm({
                title: "提示",
                content: "所有款项明细已确认无误？",
                okText: "确认款项明细无误",
                onOk: () => {
                    this.$api.orderApi
                        .setConfirmReturned({order_id: this.item.id})
                        .then(res => {
                            if (res.error === 0) {
                                !this.isExternal && this.setValue();
                                this.$emit('on-refresh');
                                location. reload()
                            }
                        });
                },
                onCancel: () => {
                }
            });
        },
        formatPrice(price) {
            return parseFloat(price).toFixed(2)
        },
    }
};
</script>


<style scoped lang="scss">
.item-box {
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 12px;

    .item-box-title {
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        line-height: 40px;
        background-color: var(--background-color);
        height: 40px;
        justify-content: space-between;
        padding: 0 10px;
        -webkit-box-align: center;
    }
}


.order-detail {
    /deep/ .ivu-table {
        td {
            padding: 12px 0;
            line-height: 24px;

            .shop-box {
                margin-left: 10px;
                display: flex;
                flex-wrap: nowrap;

                .image {
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                    border-radius: 2px;

                    > img {
                        width: 100%;
                        height: 100%;
                        border-radius: 2px;
                    }
                }

                .content {
                    width: 100%;
                    flex: 1;

                    .content-text {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        height: 50px;
                        padding: 4px 0;

                        .mark {
                            @include font-12-16;
                            color: #ed4014;
                            background-color: #ffefe6;
                            border-radius: 2px;
                            margin-right: 10px;
                            width: 18px;
                            height: 18px;
                            text-align: center;
                            line-height: 18px;
                            display: inline-block;
                        }

                        .text {
                            @include font-14-20;
                        }
                    }
                }
            }

            .price {
                color: $text-first;

                .icon {
                    display: none;
                    cursor: pointer;
                }

                &:hover {
                    > .icon {
                        display: inline-block;
                    }
                }
            }
        }
    }
}
.data-goods-info-header {
    background-color: #ffffff;
    padding: 30px 40px;
    position: relative;

    .data-header-title {
        padding-bottom: 30px;
    }

    .ivu-row {
        margin-left: -10px;
        margin-right: -10px;

        .data-card-panel {
            padding: 0 10px;
        }
    }
}
</style>
